<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 优先级 new > bind > apply/call > 隐式 > 默认

    function foo() {
      console.log("foo:", this)
    }
    // 优先级:显式绑定 > 隐式绑定
    var obj = { foo: foo }  // 隐式绑定
    obj.foo.apply("abc") // 显式绑定
    // foo: String {'abc'}

    // 优先级:bind > 默认绑定
    var bar = foo.bind('aaa')
    var obj = {
      name: 'why',
      baz: bar
    }
    obj.baz()
    //foo: String {'aaa'}

    // 优先级: new > 隐式绑定
    var obj = {
      name: "why",
      foo: function () {
        console.log("foo:", this)
      }
    }
    new obj.foo()
    // foo: foo {}

    // new不可以和apply/call一起使用
    // 优先级: new > bind
    function foo() {
      console.log("foo:", this)
    }
    var bindFn = foo.bind('aaa')
    new bindFn()

    // 优先级:bind> apply/call
    function foo() {
      console.log("foo:", this)
    }
    var bindFn = foo.bind('aaa')
    bindFn.apply('bbb')
    bindFn.call('ccc')

  </script>
</body>

</html>